× Introduction Applying CSS CSS Syntax CSS Selectors Grouping Color Background CSS Fonts CSS Text CSS Links Gradients The Box Model Margin and Padding Border Outline Measurement Units Dimension CSS Quick Reference Examples Projects eBooks






CSS Text

In this tutorial you will learn how to style text on your web pages using CSS. CSS provides several properties that allows you to define various text styles such as color, alignment, spacing, decoration, transformation, etc. very easily and effectively.

Text color

The color property sets the color of text by using either one of the color notations.

Example: Try It

p {
 color: blue;
 }

Text-transform

Text-transform controls text casing. Possible values are inherit, none, uppercase, lowercase, and capitalize, with none as the initial value.

Example: Try It

h1 {
    text-transform: uppercase;
}

Text-decoration

One or more visual effects to text can be added with the text-decoration property. This property typically accepts one of the following values: underline, overline, line-through, and none.

Example: Try It

h1 {
    text-decoration: overline;
}

Text-indent

The first line of text in a block element can be indented with the text-indent property. It can be set to a unit of measure or a percentage of the parent element’s width. Text can also be indented backward by using a negative value.

Example: Try It

p {
    text-indent: 100px;
}

Text-align

The text content of a block element can be aligned with the text-align property. Text can be aligned in four ways: to the left, right, centre or justified (straight left and right margins).

Example: Try It

h1 {
    text-align: center;
}

Text-Drection

The writing direction of text can be switched with the direction property. The default value is ltr, meaning left-to-right. It can be changed to rtl to make text content within a block element flow to the right.

Example: Try It

h1 {
    direction:rtl;
}

Text-shadow

A shadow effect can be added to text with the text-shadow property.

The shadow is defined using two offset values, followed by two optional values for the blur radius and color. The x and y offsets are specified as length values relative to the text. Positive values move the shadow right and down; negative values move it left and up.

Example: Try It

h1 {
 text-shadow: 2px -1px 2px red;  
}

Line Height

The line-height property is used to set the height of the text line. The value of this property can be a number, a percentage (%), or a length in pixels, ems, etc. The following example sets line height to 1.5 times font size.

Example: Try It

p {
    line-height: 2.5;
}

Word-spacing

Word-spacing sets the spacing between words.

Example: Try It

p {
    word-spacing: 20px;
}

Line-spacing

Line-spacing sets the spacing between lines.

Example: Try It

p {
    line-spacing: 20px;
}